<template>
  <div class="login df-c  ">
    <h1>烟支评吸系统</h1>
    <div class="content">
      <div class="l">
        <img src="@/assets/image/login/left.png" alt="">
      </div>

      <div class="r">
        <lay-form :model="form" ref="layFormRef" :rules="rules" required>
          <lay-form-item label="账户" prop="username" label-width="0">
            <div class="df ai-c from-box">
              <div><img src="@/assets/image/login/user.svg" alt=""></div>
              <lay-input v-model="form.username" placeholder="请输入用户名" @keydown.enter="submit"></lay-input>
            </div>
          </lay-form-item>
          <lay-form-item label="密码" prop="password" label-width="0">
            <div class="df ai-c from-box">
              <div><img src="@/assets/image/login/pwd.svg" alt=""></div>
              <lay-input v-model="form.password" placeholder="请输入密码" type="password" password @keydown.enter="submit"></lay-input>
            </div>

          </lay-form-item>
          <lay-form-item label="" prop="" label-width="0">
            <div class="w100 h100 df-c  "> <lay-button type="primary" @click="submit" class="submit" :loading="loading" loadingIcon="layui-icon-loading">登录</lay-button></div>
          </lay-form-item>
        </lay-form>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref } from "vue";
import { layer } from "@layui/layer-vue";
import http from "@/http";
import { useCounterStore } from "@/current";
import { storeToRefs } from "pinia"; // cnpm i pinia --save  2.1.3
import { useRouter } from "vue-router";
const store = useCounterStore();
const { deviceId, token, system, selectedKey } = storeToRefs(store);
const { get_router, get_user_list } = store;
// const {get_router} = store
// 登录loading
const loading = ref<boolean>(false);
const layFormRef = ref();

const router = useRouter();
// 表单
const form = reactive({
  username: "",
  password: "",
});

// 表单检验
const rules = ref({
  username: {
    type: "string",
    min: 3,
    max: 20,
  },
  password: {
    type: "string",
    min: 8,
    max: 18,
  },
});

// 登录
const submit = function () {
  loading.value = true;
  layFormRef.value.validate(async (isValidate: boolean, model: [], errors: [] | null) => {
    console.log(isValidate, model, errors);
    if (isValidate) {
      try {
        const res = await http.corsApi("/login/doLogin", "post", {
          deviceId: deviceId.value,
          passWord: form.password,
          userName: form.username,
        });

        console.log("ressssssssss", res);
        if (res.code === 200) {
          system.value = res.data;
          token.value = res.data.token;
          localStorage.setItem("token", res.data.token);
          layer.msg("登录成功", { time: 2000, icon: 1 });
          setTimeout(async () => {
            // router.push("/index");
            await get_router();
            await get_user_list();
          }, 10);

          // await get_auth_list(res.data.roles);
          // get_router();

          // layer.msg("登录成功", { time: 2000, icon: 1 });
          // selectedKey.value = "home";
          // localStorage.setItem("token", res.data.token);
          // router.push("/index");

          // await get_router();
          // setTimeout(async () => {
          //   await get_router();

          // }, 1000);
        } else {
          layer.msg(res.msg, { time: 1500, icon: 2 });
          loading.value = false;
        }
      } catch (err) {
        console.log(err);
        loading.value = false;
      }
    } else {
      setTimeout(() => {
        loading.value = false;
      }, 1000);
    }

    // setTimeout(() => {
    //   loading.value = false;
    //   console.log(authList.value);
    // }, 2000);
  });
};

const authList = ref([]);
// 获取权限列表
const get_auth_list = (list) => {
  authList.value = [];
  list.forEach(async (item) => {
    const res = await http.corsApi(`/secRole/getPermissionId/${item}`, "get", {});
    console.log(res);
    authList.value.push(...res.data);
  });
};

// // 获取当前人路由数据
// const get_router = async () => {
//   const res = await http.corsApi("/secPermission/generatorRouters", "get", {});
//   console.log(res);
// };
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  background: url("@/assets/image/login/bg.png");
  background-size: 100% 100%;
  flex-direction: column;
  h1 {
    margin-bottom: 50px;
    font-size: 52px;
    color: #fff;
  }
  .content {
    width: 75%;
    background-color: #fff;
    border-radius: 15px;
    padding: 49px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .l {
      width: 50%;
      margin-right: 30px;
      img {
        width: 100%;
        height: 50vh;
      }
    }
    .r {
      width: 45%;
      height: 100%;
      // border: 2px solid #d8d8d8;
      box-shadow: 0 0 3px 2px #ccc;
      border-radius: 15px;
      padding: 40px;
      box-sizing: border-box;
      .submit {
        width: 250px;
        height: 62px;
        border-radius: 10px;
        margin-top: 50px;
      }
    }
  }
}

.from-box {
  border-bottom: 1px solid #bbbbbb;
  padding: 8px;
  box-sizing: border-box;
  margin-top: 40px;
  > div {
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 36px;
      height: 36px;
    }
  }
}
.layui-input {
  border: 0 none;
}

:deep(.layui-input-wrapper) {
  height: 56px;
}
</style>